vue 2.0版本elementui test unit单元测试 mock axios vuex $route

2024-07-16 06:54| 来源: 网络整理| 查看: 265

记录一下，遇到的问题

1.vue 页面包含vuex ，axios

//引用mount，能够加载elementui组件的HTML import { shallowMount, mount, createLocalVue, RouterLinkStub} from "@vue/test-utils"; import Sample from "@/views/BookIndex.vue"; import mockAxios from "axios"; //axios 接口文件 import api from '@/api' //vuex 文件 import vuextest from '@/store' // elementui 组件 import ElementUI from 'element-ui' const localVue = createLocalVue() //挂载elementui localVue.use(ElementUI) //模拟Header里面的this.$route.path const routes = { path: '/test', component: Sample, }; const routertest= { push: jest.fn(), } const booklist = api describe("Sample.vue", () => { //模拟返回的数据 const response = { data:{ data:[ //这个data的属性名和.vue文件中axios中res.data.data;的第二个data名称是一样的 {"bookId":10100,"bookName":"w_1","buyTime":"2021/02/28","bookBuyer":"test","bookBorrower":"test","bookVolume":1} ] } }; //模拟调用的axios接口 mockAxios.get.mockReturnValue(Promise.resolve(response)); const wrapper = mount(Sample, { sync: false, localVue, // router, mocks: { $route: routes, $router: routertest, $api: booklist, $store: vuextest }, stubs: { 'router-link': RouterLinkStub , // 'Header':Header }, }); it("axios store", async() => { expect(wrapper.exists()).toBe(true); //get 是否调用了一次 expect(mockAxios.get).toHaveBeenCalledTimes(1); expect(mockAxios.get).toBeCalledWith( "http://xx.xx.xx.xx:3030/findbook/all", {"params": {"searchBook": "", "searchBuyer": "", "selectSort": "在录"}} ); // 点击搜索，也调用了一次 await wrapper.find('button').trigger('click',{button: 0}) expect(mockAxios.get).toHaveBeenCalledTimes(2); // 点击页数 var page = wrapper.findAll('.el-pager .number').at(1) page.trigger('click') await wrapper.vm.$nextTick() console.log(page.text()); //snapshot生存dom的html文件 expect(wrapper).toMatchSnapshot(); // expect(wrapper.vm.tableArr.length).toBe(1); wrapper.destroy() }); });

2，api vuex见下图

关于mocks axios问题，需要在tests文件夹下建立__mocks文件

详细代码可见github地址GitHub - QianYiYi/vue-test-unit-mock-axios-vuex

【本文地址】

公司简介

联系我们